<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.3.js"></script>
    <title>大昌行集团</title>
</head>
<body>
<div class="china">
    <!--header-->
    <div class="header">
        <div class="header-top">
            <p>欢迎来到大创兴集团官网！</p>
            <form action="" style="float: right;">
                <select name="" id="">
                    <option value="请选择">请选择</option>
                    <option value="请选择">请选择</option>
                </select>
            </form>
            <p style="float: right;">
                <span><a href="#">English</a></span>
                <span><a href="#">繁体</a></span>
            </p>
        </div>
        <div class="header-bottom-fu">
            <div class="header-bottom">
                <img src="pic/大昌行集团_07.png" alt="">
                <p>
                    <span><a href="#">主业</a></span>
                    <span><a href="#">汽车业务</a></span>
                    <span><a href="#">食品级消费品业务</a></span>
                    <span><a href="#">集团介绍</a></span>
                    <span><a href="#">投资者关系</a></span>
                    <span><a href="#">就业机会</a></span>
                    <span><a href="#">联络我们</a></span>
                    <span>
                    <form action="">
                        <input type="搜索">
                    </form>
            </span>
                </p>
            </div>
        </div>
    </div>

    <!--banner-->
    <div class="banner">
        <div class="img-ct">
            <img src="pic/car1.jpg" alt="">
            <img src="pic/car2.jpg" alt="">
            <img src="pic/car3.jpg" alt="">
        </div>
        <div class="btn-ct">
            <ul class="btn">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <!--news-->
    <div class="news">
        <div>
            <img src="pic/大昌行集团_14.png" alt="">
            <ul>
                <li>耀能缤纷童乐日</li>
                <li>紫云膏制作者.长乐者</li>
                <li>集团捐款助台南地震赈灾</li>
                <li>公益慈善马拉松2016</li>
                <li>大昌行宣布收购利丰与亚洲之分销业务</li>
            </ul>
        </div>
        <div>
            <img src="pic/大昌行集团_11.png" alt="">
            <br>
            <iframe height=250 width=300
                    src='http://player.youku.com/embed/XNDcyNDk5NjU2'
                    frameborder=0 'allowfullscreen'>
            </iframe>
        </div>
        <div>
            <h3>证券价格</h3>
            <p>大昌行集团股份有限公司：（01828）</p>
            <p><a href="#">KH$3.30</a></p>
            <h3>大昌食品</h3>
            <p>为您搜罗环球优质美食，<br>给追求高质美食的您崭新<br>的网上购物体验。</p>
        </div>
    </div>
    <div class="clearfloat"></div>
    <!--footer-->
    <div class="footer">
        <p>中国中信股份成员公司</p>
        <p>
            <span>网站指南</span>
            <span>声明</span>
            <span>版权所有 2011 大昌行集团</span>
        </p>
    </div>

</div>
<script>
    $(function(){
        var xiabiao=0
//        点击底部按钮，显示相应图片
        $(".btn li").hover(function(){
            xiabiao = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".img-ct img").eq(xiabiao).show().siblings().hide();
        },function(){});

//        自动轮播
        var bofang=setInterval(lunbo,1000);
//        鼠标悬停到图片上停止轮播
//        $(".banner").hover(function(){
//            clearInterval(bofang);
//        },function(){})
//          轮播函数
        function lunbo(){
            xiabiao++;
            xiabiao%=3;
            $(".btn li").eq(xiabiao).addClass("active").siblings().removeClass("active");
            $(".img-ct img").eq(xiabiao).show().siblings().hide();
        }
    })
</script>
</body>
</html>